<template>
  <div class="container">
    <!-- <div style="text-align: center; line-height: 32px">催交/监造报表</div> -->

    <div class="search">
      <van-field
        v-model="projectName"
        right-icon="search"
        placeholder="选择项目"
        @clickRightIcon="clickRightIcon"
      />
    </div>
    <div class="chart-box">
      <commonEcharts :option="option1" :width="width" height="150px"></commonEcharts>
      <div class="process-range" @click="showProcessPicker = true">
        <div class="range-title">合同进度</div>
        <div class="range-line">
          <div class="icon" style="background-color: #3354f4"></div>
          <div class="text">签订合同 <span>100</span></div>
        </div>
        <div class="range-line">
          <div class="icon" style="background-color: #954500"></div>
          <div class="text">完成交付 <span>75</span></div>
        </div>
      </div>
    </div>
    <div class="chart-box">
      <commonEcharts :option="option2" :width="width" height="150px"></commonEcharts>
      <div class="process-range" @click="showProcessPicker = true">
        <div class="range-title">批次进度</div>
        <div class="range-line">
          <div class="icon" style="background-color: #3354f4"></div>
          <div class="text">签订合同 <span>100</span></div>
        </div>
        <div class="range-line">
          <div class="icon" style="background-color: #954500"></div>
          <div class="text">完成交付 <span>75</span></div>
        </div>
      </div>
    </div>
    <div class="chart-box">
      <commonEcharts :option="option3" :width="width" height="150px"></commonEcharts>
      <div class="process-range" @click="showProcessPicker = true">
        <div class="range-title">送货进度</div>
        <div class="range-line">
          <div class="icon" style="background-color: #3354f4"></div>
          <div class="text">签订合同 <span>100</span></div>
        </div>
        <div class="range-line">
          <div class="icon" style="background-color: #954500"></div>
          <div class="text">完成交付 <span>75</span></div>
        </div>
      </div>
    </div>

    <van-popup v-model:show="showProjectPicker" round position="bottom">
      <van-picker
        title="选择项目"
        show-toolbar
        :columns="projectColumns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>

    <van-popup
      v-model:show="showProcessPicker"
      round
      position="bottom"
      :style="{ height: '88%' }"
    >
      <div class="popup-header">
        <div class="popup-header-title">进度信息</div>
        <van-icon
          class="popup-header-close"
          @click="showProcessPicker = false"
          name="clear"
          color="#AAAAAA"
          size="20"
        />
      </div>

      <div class="popup-content">
        <div class="main-box">
          <commonTabs v-model="currentIndex" :navs="tabs">
            <template v-for="(item, index) in tabs" :key="index" v-slot:[index]>
              <component
                :is="item.is"
                :actived="currentIndex == index"
                :type="item.type"
              />
            </template>
          </commonTabs>
        </div>
      </div>
    </van-popup>

    <CommonFloatMenu :columns="menuColumns"></CommonFloatMenu>
  </div>
</template>

<script>
import { defineComponent, ref, shallowRef } from 'vue';
import CommonFloatMenu from '@/components/common-float-menu/index.vue';
import CommonEcharts from '@/components/common-echarts/index.vue';
import CommonTabs from '@/components/common-tabs/index.vue';

import {
  Field as VanField,
  Popup as VanPopup,
  Icon as VanIcon,
  Picker as VanPicker,
} from 'vant';

import { Classify, Abnormal } from './module';

export default defineComponent({
  components: {
    CommonFloatMenu,
    CommonEcharts,
    CommonTabs,
    Classify,
    Abnormal,
    VanField,
    VanPopup,
    VanIcon,
    VanPicker,
  },

  setup(props, { slots }) {
    const option1 = ref({});
    const option2 = ref({});
    const option3 = ref({});
    const width = ref('50%');
    const showProcessPicker = ref(false);

    const projectName = ref('');
    const clickRightIcon = () => {
      console.log('xxxxxxxxxxx');
      showProjectPicker.value = true;
    };

    const showProjectPicker = ref(false);
    const projectColumns = [
      {
        text: 'IPIP园区-Pomalaa',
        uid: 1,
      },
      {
        text: '华能XJ-CL-2401-0',
        uid: 1,
      },
      {
        text: '帕玛拉',
        uid: 1,
      },
    ];
    const onConfirm = () => {
      showProjectPicker.value = false;
    };
    const onCancel = () => {
      showProjectPicker.value = false;
    };

    const currentIndex = ref(0);
    const tabs = ref([
      {
        title: '分类统计',
        is: shallowRef(Classify),
        type: 0,
      },
      {
        title: '异常预警',
        is: shallowRef(Abnormal),
        type: 1,
      },
    ]);

    const menuColumns = ref([
      {
        title: '返回',
        colProps: {
          background: ' #2751a6',
        },
        onClick: () => {
          window.history.back();
        },
      },
    ]);

    const placeItemStyle = {
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      itemStyle: {
        color: '#cbccd0',
      },
      emphasis: {
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
      },
    };

    setTimeout(() => {
      option1.value = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        color: ['#3354F4', '#D8D8D8'],
        title: {
          text: '80%',
          left: 'center',
          top: '42%',
          textStyle: {
            color: '#000000',
            fontSize: 18,
            align: 'center',
          },
        },
        series: [
          {
            name: '运动情况',
            type: 'pie',
            radius: ['55%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center',
              },
            },

            data: [
              { value: 80, name: '已完成' },
              { value: 20, name: '未完成' },
            ],
          },
        ],
      };
      option2.value = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        color: ['#954500', '#D8D8D8'],
        title: {
          text: '80%',
          left: 'center',
          top: '42%',
          textStyle: {
            color: '#000000',
            fontSize: 18,
            align: 'center',
          },
        },
        series: [
          {
            name: '运动情况',
            type: 'pie',
            radius: ['55%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center',
              },
            },

            data: [
              { value: 80, name: '已完成' },
              { value: 20, name: '未完成' },
            ],
          },
        ],
      };
      option3.value = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        color: ['#2BA471', '#D8D8D8'],
        title: {
          text: '80%',
          left: 'center',
          top: '42%',
          textStyle: {
            color: '#000000',
            fontSize: 18,
            align: 'center',
          },
        },
        series: [
          {
            name: '运动情况',
            type: 'pie',
            radius: ['55%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center',
              },
            },

            data: [
              { value: 80, name: '已完成' },
              { value: 20, name: '未完成' },
            ],
          },
        ],
      };
    }, 0);

    return {
      projectName,
      showProcessPicker,
      clickRightIcon,
      currentIndex,
      tabs,
      width: width,
      option1,
      option2,
      option3,
      menuColumns,
      showProjectPicker,
      projectColumns,
      onConfirm,
      onCancel,
    };
  },
});
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  .search {
    padding: 8px 20px;
    /deep/ .van-cell {
      border: 1px solid #e9e9e9;
      border-radius: 8px;
    }
  }
}

.chart-box {
  box-shadow: 0 1px 8px 0 #ebedf0;
  width: 95%;
  margin: 15px auto;
  border-radius: 15px;
  display: flex;
}

.process-range {
  flex: 1;
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  .range-title {
    font-size: 16px;
    font-weight: 600;
  }
  .range-line {
    display: flex;
    padding: 5px 10px 5px 0;
    font-size: 14px;
    .icon {
      width: 12px;
      height: 12px;
      border-radius: 6px;
      align-self: center;
      margin-right: 10px;
    }
    .text {
      color: #77838f;
    }
  }
}

.main-box {
  padding: 10px 20px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  .popup-header-title {
    font-size: 16px;
    font-weight: 600;
    height: 30px;
    line-height: 30px;
  }
  .popup-header-close {
    padding-top: 5px;
  }
}
.popup-content {
  padding: 5px 0px 20px;
  height: 85%;
  overflow-y: scroll;
}
</style>
